<template>
	<view class="" style="padding: 20rpx;">
		<view class="hot-content" v-for="(item,index) in dataList" :key="index" @tap="golvjuDetail(item)">
			<view class="hot-img">
				<image class="" :src="item.main_product_app.url" mode="aspectFill" v-if="item.type==51"></image>
				<image class="" :src="item.miniImg.url" mode="aspectFill" v-else></image>
				<view class="" >
					<view class="flex align-center padding-sm" style="background: #E1265D;height: 60rpx;position: absolute;left: 0rpx;top: 0rpx;color: #fff;border-radius: 0 0 20rpx 0" 
						v-if="item.is_hot">
						<image class=""
							src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202309/7d3834f76c48dcd691f2e3fb4dea9f01.png"
							mode="aspectFill" style="width: 35rpx;height: 35rpx;"></image>
						<text class="margin-left-xs text-bold">推荐</text>
					</view>
				</view>
				<view class="hot-img-rl">
					<view class="">
						
					</view>
					<view class="flex padding-tb-sm">
						<view class="flex-a">
							<image src="/static/public/lv1.png" mode="" style="width: 32rpx;height: 32rpx;"></image>
							<text>{{item.trip_volume}}</text>
						</view>
						<view class="flex-a" style="margin-left: 30rpx;">
							<image src="/static/public/lv2.png" style="width: 32rpx;height: 32rpx;">
							</image>
							<text>{{item.pv}}</text>
						</view>
					</view>
				</view>
				<view class="monthBox" v-if="item.month && item.type==51">
					推荐：{{item.month}} 月
				</view>
				<view class="flex align-center text-white padding-tb-xs padding-lr-sm"
					style="position: absolute;right: 0rpx;top: 0rpx;background: #0a0a0a7a;border-radius: 0 0  0 20rpx"
					v-if="(item.trip_num||item.destination_city)&&item.type!=51">
					<image
						src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202311/565d5c83fb7fde1969a0bcf320ee166a.png"
						mode="aspectFill" style="width: 30rpx;height: 30rpx;" v-if="item.trip_num">
					</image>
					<text class="margin-left-xs text-bold" v-if="item.trip_num">{{item.trip_num}}天</text>
					<text class="text-white text-bold padding-lr-sm text-xl"
						v-if="item.trip_num&&item.destination_city">|</text>
					<image class=""
						src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202311/be0f04e1638dc8f509039aca45bf4a8e.png"
						mode="aspectFill" style="width: 30rpx;height: 30rpx;" v-if="item.destination_city"></image>
					<text class="margin-left-xs text-bold" v-if="item.destination_city">{{item.destination_city}}</text>
				</view>
			</view>
			<view class="hot-title">
				{{item.name}}
			</view>
			<view class="flex justify-between align-center padding-lr-sm padding-bottom-sm" v-if="item.brief_introduction||item.type!=51">
				<view class="u-line-2 text-gray fontSize32 padding-right-sm" v-if="item.brief_introduction"
					style="flex: 1;">
					{{item.brief_introduction}}
				</view>
				<block v-if="item.type!=51">
					<view class="flex align-end" style="color: #E1265D;" v-if="item.residual_position>0">
						<text class="text-xxl text-bold">￥{{item.min_price?item.min_price:0}}</text>
						<text style="padding-bottom: 4px;">起</text>
					</view>
					<view class="flex" style="color: #F9A617;" v-else>
						报名关闭
					</view>
				</block>
			</view>
			<view class="tag" v-if="item.type!=51">
				<view v-if="iindex<4" v-for="(iitem,iindex) in item.sojourn_featured_label" :key="iindex">
					{{iitem.title}}
				</view>
			</view>
			<view class="tag" v-else>
				<view style="flex-shrink: 0;" class=""
					:style="iiindex <= 2 ? 'display:block' : 'display:none' "
					v-for="(iiitem,iiindex) in item.special_label" :key="iiindex">
					<text>{{iiitem.title}}</text>
				</view>
			
			</view>
		</view>
		<u-empty mode="data" v-if="dataList.length == 0" icon="/static/empty.svg" text="暂无更多旅行产品"></u-empty>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			dataList: {
				type: Array,
				default () {
					return []
				}
			},
		},

		computed: {},
		data() {
			return {}
		},
		onLoad(e) {

		},

		onReady() {},
		onShow() {},

		methods: {
			golvjuDetail(data) {
				if (data.type == 51||data.product_type==51) {
					this.onJump('/pagesPro/detail/baseDetail?id=' + data.id)
				} else if (data.type == 52||data.product_type==52) {
					this.onJump('/pagesPro/detail/lvjuDetail?id=' + data.id)
				}else if(data.type == 50||data.product_type==50){
					this.onJump('/pagesPro/detail/lineDetail?id=' + data.id)
				}
			},

		}

	}
</script>
<style>
	.u-popup__content {
		height: 100% !important;
	}
</style>
<style lang="scss" scoped>
	.hot-content {
		// border: 2rpx solid #D8D8D8;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
	
		.hot-img {
			position: relative;
	
			image {
				width: 100%;
				height: 324rpx;
			}
	
			.hot-img-rl {
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: space-between;
				align-content: center;
				color: #fff;
				width: 100%;
				padding: 0 20rpx 0 0;
				align-items: center;
				font-size: 28rpx;
				
			}
	
			.monthBox {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				display: flex;
				align-content: center;
				color: #fff;
				padding: 10rpx;
				align-items: center;
				font-size: 28rpx;
				background-color: #E1265D;
				border-radius: 30rpx;
			}
		}
	
		.hot-title {
			font-size: 42rpx;
			font-weight: bold;
			margin: 20rpx 0 20rpx 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			/*超出几行后省略号*/
			overflow: hidden;
		}
	
		.tag {
			display: flex;
			padding-left: 20rpx;
			overflow: hidden;
	
			view {
				border: 2rpx solid #cacaca;
				font-size: 30rpx;
				margin-right: 20rpx;
				color: #999999;
				padding: 4rpx 8rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>